<template>
	<view class="login-view">
		<uni-forms ref="baseForm" :modelValue="formData" label-position="top">
			<uni-forms-item label="手机号码">
				<input confirm-type="确认" type="number" class="input" v-model="formData.mobile" style="border: none; border-radius: 0px; border-bottom: 2rpx solid #aaa;" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item label="验证码">
				<view class="input-w-view" style="border-bottom: 2rpx solid #aaa;" >
					<input class="input-w" confirm-type="确认" type="number" v-model="verifyCode" style="border: none;" placeholder="请输入验证码" />
					<button v-if="countDown == 0" @click="sendMsg" class="code-view">{{codeViewMsg}}</button>
					<view v-if="countDown > 0" class="code-view">{{countDown + 's后重新发送'}}</view>
				</view>
			</uni-forms-item>
		</uni-forms>
		<button @click="userLogin" class="loginBtn" type="primary" :disabled="btnDisabled">登录</button>
	</view>
</template>

<script>
	import { sendMassage } from '@/api/user.js'
	export default {
		name: "jump-login",
		props: ['smsCall', 'loginCall'],
		data() {
			return {
				formData: {
					mobile: ''
				},
				rules: {},
				styles: {
					color: '#000000',
					borderColor: '#ffffff',
					backgroupColor: '#ffffff'
				},
				codeViewMsg: "获取验证码",
				countDown: 0,
				dbClick: false,
				btnDisabled: true,
				verifyCode: ''
			};
		},
		methods: {
			sendMsg() {
				const that = this;
				if (this.formData.mobile == '' || this.formData.mobile == undefined) {
					uni.showToast({
						icon: 'none',
						title: "请先输入手机号"
					})
					return;
				}
				if (this.dbClick) return;
				this.dbClick = true;
				setTimeout(() => {
					this.dbClick = false;
				}, 500)
				if (!this.validatePhoneNumber(that.formData.mobile)) {
					uni.showToast({
						icon: "none",
						title: "手机号码异常"
					})
					return;
				}
				sendMassage({ mobile: this.formData.mobile }).then(res => {
					if(res.success){
						this.countDown = 60
						this.countDownData();
						//短信发送
						this.verifyCode = res.data
						this.$emit('smsCall', () => {
							return res.data
						});
					}else{
						this.countDown = 0;
						this.$tip.toast(res.data.message);
						//短信发送
						this.$emit('smsCall', () => {
							return '获取失败'
						});
					}
				})
			},
			userLogin() {
				const that = this;
				if (!this.validatePhoneNumber(that.formData.mobile)) {
					uni.showToast({
						icon: "none",
						title: "手机号码异常"
					})
					return;
				}
				const sD = {
					"mobile": that.formData.mobile,
					"verifyCode": that.verifyCode,
					"sysType": 4,
				};
				this.$emit('loginCall', sD);
			},
			validatePhoneNumber(phoneNumber) {
				// 使用正则表达式匹配手机号码的格式
				var pattern = /^1[3456789]\d{9}$/;

				// 验证手机号码是否符合格式要求
				if (pattern.test(phoneNumber)) {
					return true; // 手机号码格式正确
				} else {
					return false; // 手机号码格式不正确
				}
			},

			countDownData() {
				this.btnDisabled = false;
				let time = setInterval(() => {
					this.countDown--;
					if (this.countDown <= 0) {
						clearInterval(time);
						this.codeViewMsg = '重新获取验证码'
					}
				}, 1000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login-view {
		margin: 100rpx 60rpx 0px 60rpx;
	}

	.input {
		border-radius: 20rpx;
		background-color: white;
		padding: 20rpx;
		border: 2rpx solid black;
		height: auto;
	}

	.input-w-view {
		position: relative;
		display: flex;
		align-items: center;
		height: 100rpx;
	}

	.input-w {
		position: absolute;
		border-radius: 20rpx;
		background-color: white;
		padding: 20rpx;
		border: 2rpx solid black;
		height: auto;
	}

	.code-view {
		width: 220rpx;
    height: 60rpx;
    right: 30rpx;
    position: absolute;
    z-index: 99;
    border: 2rpx solid #1C83FC;
		color: #1C83FC;
    border-radius: 8rpx;
    text-align: center;
    line-height: 60rpx;
		font-size: 24rpx;
	}

	.loginBtn {
		margin-top: 100rpx;
		border-radius: 20rpx;
	}
</style>